<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>南声-文章详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/details.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <!-- header -->
    <header>
        <div class="headerInfo">
            <ul class="listLeft">
                <li><a href="javascript:;"><img
                            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg"
                            alt=""></a></li>
                <li><a class="active" href="javascript:;">首页</a></li>
                <li><a href="javascript:;">沸点</a></li>
                <li><a href="javascript:;">资讯</a></li>
                <li><a href="javascript:;">小册</a></li>
                <li><a href="javascript:;">活动</a></li>
                <li><a href="javascript:;">开发者大会</a></li>
                <li><input type="text" placeholder="搜索"></li>
            </ul>
            <ul class="listRight">
                <!-- <li><input type="text" placeholder="搜索"></li> -->
                <li><a class="devCenter" href="javascript:;">创作者中心</a></li>
                <li><a class="write" href="javascript:;">写文章 <i class="iconfont icon-caret-down"></i></a></li>
                <li><a class="loginBtn" href="./login.html">登录</a></li>
                <li class="userfaceLi">
                    <a class="userface" href="javascript:;">
                        <!-- <img src="" alt=""> --> 牵
                    </a>
                    <div class="subMenu">
                        <div><a href="javascript:;">个人中心</a></div>
                        <div><a href="javascript:;">写文章</a></div>
                        <div><a id="logoutBtn" href="javascript:;">退出登录</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <!-- details -->
    <div class="details">
        <div class="detailsArticles">
            <div class="authorInfoHeader">
                <div>
                    <div><span class="userface">牵</span></div>
                    <div style="margin-left: 10px;">
                        <h3>牵 牛</h3>
                        <span>2021年07月21日 阅读 2201</span>
                    </div>
                </div>
                <div>
                    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" href="javascript:;"> 关注</a>
                </div>
            </div>
            <br>
            <br>
            <div>
                <h1>手撕钉钉前端考试卷，offer，拿来吧你~</h1>
                <br><br>
                <div>
                    子弈大佬出面试指南的本意也是帮助大家扫盲，让大家去了解一些可能自己没有接触过或者自己不知道的东西，这里面的大部分题目其实是在不断深入沟通的语境里产生的，也不影响对面试者的面试判断，纯粹属于那种面着面着觉得不错，觉得他能够答上来而给予的加分一问，不是大家理解的刁难人的意思。
                </div>
            </div>
            <p class="zan">
                <i class="layui-icon layui-icon-praise"></i>
                <span>118</span>
            </p>
        </div>
        <div class="detailsAuthor">
            
        </div>
    </div>

    <script>
        let loginBtn = document.getElementsByClassName('loginBtn')[0];
        let userface = document.getElementsByClassName('userface')[0];
        let write = document.getElementsByClassName('write')[0];
        let fLi = document.getElementsByClassName('userfaceLi')[0];
        let sub = document.getElementsByClassName('subMenu')[0];
        let logout = document.getElementById('logoutBtn');

        userfaceCheck();
        function userfaceCheck(){
           let loginer =  window.sessionStorage.getItem('loginer');
           if(loginer == null){
                userface.style.display = 'none';
                loginBtn.style.display = 'block';
           }else{
                let name = JSON.parse(loginer).username.substr(0,1);
                userface.style.display = 'block';  
                loginBtn.style.display = 'none';
                userface.innerHTML = name;
                write.style.display = 'none';
           }
        }

        write.onclick = function(){
            let loginer =  window.sessionStorage.getItem('loginer');
            if(loginer == null){
                window.location.href = './login.html';
            }
        }

        fLi.onmouseover = function(){
            sub.style.display = 'block'
        }

        fLi.onmouseout = function(){
            sub.style.display = 'none'
        }

        logout.onclick = function(){
            if(confirm('是否确定退出')){
                window.sessionStorage.removeItem('loginer');
                window.location.reload();
            }
        }
    </script>
</body>

</html>